
<template>
    <div class="date-tools">
        <div class="date-years">
            <button class="date-btn date-left" @click="subMonth()" value=""><</button>
            <button class="date-middle" >{{panelYear}}<span class="divider">/</span>{{panelMonth+1}}</button>
            <button class="date-btn date-right" @click="addMonth()">></button>
        </div>
        <div class="date-weeks">
            <span>日</span>
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
        </div>
        <div class="date-days">
            <div v-for="(day,index) in dayFullList" :key="index">
                <button v-if="day!=0">
                    <a href="javascript:void(0);" v-if="(jiaozhuDay.includes(day))" class="active" @click="getCurrentDay(day)">{{day | filterDay}} </a>
                    <a href="javascript:void(0);" v-else-if="(kaijiangDay.includes(day))" class="active2">{{  day | filterDay }}</a>
                    <a href="javascript:void(0);" v-else>{{day | filterDay}} </a>
                </button>
                <button v-else>
                    <a v-if="day!=0" href="javascript:void(0);">{{day}}</a>
                </button>
            </div>
        </div>
        <div class="bottom">
          <span class="red"></span>
          <span class="text1">搅珠日</span>
          <span class="blue"></span>
          <span class="text2">已开奖日期</span>
      </div>
    </div>
</template>

<script>
    export default ({
        props: ['dateToolsKey','trainDateList','jiaozhuDay','kaijiangDay'],
        data(){
            return {
                yearList:[2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022],
                monthList:[1,2,3,4,5,6,7,8,9,10,11,12],
                weekList:[],
                dayList:[],//所有的天数列表，前面空位补0
                dayFullList:[],//所有的天数列表，前面空位补0
                panelYear:'',//仪表盘显示的年
                panelMonth:'',//仪表盘显示的月（从0开始）
                panelDay:'',//仪表盘显示的天（从1开始）
                firstDay:'',//每月第一天
                lastDay:'',//每月最后一天也即每月多少天
                firstDayisWhat:'',//第一天星期几0-6（星期日到星期六）
                showDropDownYM:false,
            }
        },
        filters:{
            filterDay(value){
                return parseInt(value.slice(-2));
            }
        },
        methods:{
            dateInit(year=(new Date()).getFullYear(),month=(new Date()).getMonth()){
                let self = this;
                let y = year;
                let m = month;
                self.panelYear = year;
                self.panelMonth = month;
                self.firstDay = (new Date(y,m,1)).getDate();//每月第一天
                self.lastDay = (new Date(y,m+1,0)).getDate();//每月最后一天也即每月多少天
                self.firstDayisWhat = (new Date(y,m,1)).getDay();//第一天星期几0-6（星期日到星期六）
                let beginTmp = new Array(self.firstDayisWhat).fill(0);//初始化长度为3的数组并填充0
                let lastTmp = [];//初始化长度为当月天数的数组并填充为0-30或0-31
                let lastFullTmp = [];//初始化完整的月的每天格式为年月日20180627
                for (let i=1;i<=self.lastDay;i++){
                    lastTmp.push(i);
                    lastFullTmp.push(''+self.panelYear+self.addPreZero(self.panelMonth+1)+self.addPreZero(i));
                }
                self.dayList=[...beginTmp,...lastTmp];//用结构的方式生成新日期数组
                self.dayFullList = [...beginTmp,...lastFullTmp];//用结构的方式生成年月日完整的新日期数组
            },
            subMonth(){
                console.log(this.panelMonth)
                let self = this;
                if(self.panelMonth <= 0){
                    self.panelMonth = 11;
                    self.panelYear--;
                }else if( self.panelMonth > 0){
                    self.panelMonth--;
                }
            },
            addMonth(){
                let self = this;
                if(self.panelMonth<11){
                    self.panelMonth++;
                }else if( self.panelYear > 11 ){
                    self.panelMonth = 1;
                    self.panelYear++;
                }
            },
            getCurrentDay(currentDay){
                this.panelDay = currentDay;
            },
            selectYM(){
                let self = this;
                self.showDropDownYM = true;
            },
            selectY(year){
                let self = this;
                self.panelYear = year;
            },
            selectM(month){
                let self = this;
                self.panelMonth = month;
                self.showDropDownYM=false;
            },
            addPreZero(num){//小于9的需要添加0前缀
                return (num>9) ? num:('0'+num);
            },
            removePreZero(num){//小于9的需要去除0前缀
                return parseInt(num);
            }
        },
        watch: {
            panelMonth(newVal,oldVal){//检测月份变化
                this.dateInit(this.panelYear,this.panelMonth);
            },
            panelYear(newVal,oldVal){//检测年份变化
                this.dateInit(this.panelYear,this.panelMonth);
            },
            panelDay(newVal,oldVal){//检测具体日期变化
                this.$emit('topDateEvent'+this.dateToolsKey,newVal);
            }
        },
        mounted(){
            this.dateInit();
        }
    })
</script>

<style lang="stylus" scoped>
  .date-tools
    position:relative;
    /* margin-top:80px; */
    display:inline-block;
    width:198px;
    border-radius 3px;
    border 1px solid #dbd3d3
    .date-years
        
        width 198px;
        height 36px;
        display:flex;
        justify-content:space-between;
        background-color #222836;
        border-top-left-radius 3px;
        border-top-right-radius 3px;
        button
            display inline-block;
            cursor:pointer;
            border none;
            outline none;
            margin 0;
            padding 0;
            background none;
            color #fff;
        .date-btn
            width:36px;
            height:36px;
            line-height 36px;
            text-align center;
            font-size 16px
            color #fff;
        .date-btn:hover
            color:#fff;
            opacity:0.6;
        .date-middle
          display flex 
          align-items center
          font-size 15px 
          font-weight 700  
          .divider 
            display inline-block
            margin 0 2px 
            padding-bottom 2px
            font-size 12px
    .date-weeks
        display: flex;
        justify-content:space-between;
        width 198px;
        height 21px;
        border 1px solid #f5d3ba;
        background-color #fdf5e5;
        color #b0855c;
        box-sizing border-box 
        
        span
            display:inline-block;
            width:44px;
            height:21px;
            line-height:21px;
            text-align:center;
                    
    .date-days 
        height 142px;
        border-top none;
        background #fff
        box-sizing border-box 
        padding 10px 0
        div
          display inline-block;
          button
              background-color:#fff;
              cursor: pointer;
              display: inline-block;
              width:28px;
              height:20px;
              border none;
              outline none;
              margin 0;
              padding 0;
              background-color:#fff;
              vertical-align top
              a
                color:#000;
                display:inline-block;
                width:28px;
                height:20px;
                font-size 13px;
                line-height: 20px;
                text-align:center;
              a.active
                  cursor:pointer;
                  color #e02828;
              a.active2
                  color #009ae0;
    .bottom
        height 24px;
        width 198px;
        // position absolute;
        bottom 0;
        left 0;
        // margin-top 19px
        border-top 1px solid #dbd3d3;
        font-size 0;
        border-bottom 1px solid #dbd3d3;
        border-bottom-left-radius 3px;
        border-bottom-right-radius 3px;
        span.red
            display inline-block;
            width 10px;
            height 10px;
            margin-top 7px;
            margin-left 9px;
            border-radius 50%;
            background-color #e02828
        span.text1
            display inline-block;
            color #8c8f98;
            font-size 14px
            width 60px;
            margin-left 8px;
            height 24px;
            line-height 24px;
        span.blue
            display inline-block;
            width 10px;
            height 10px;
            margin-top 7px;
            // margin-left 9px;
            border-radius 50%;
            background-color #009ae0
        span.text2
            font-size 14px;
            height 24px;
            line-height 24px;
            margin-left 9px;
            color #8c8f98;
</style>